<template>
	<view class="container">
		<form @submit="formSubmit" @reset="formReset">
			<view class="sub-title">楼栋信息</view>
			<tui-list-cell :arrow="true" class="tui-list" @click="jump('floower')">
				<text class="tui-list-cell-name required">楼栋</text>
				<view class="tui-right">
			    {{pageData.floorNum || '请选择楼栋'}}号楼
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true" class="tui-list"  @click="jump('unitList')">
				<text class="tui-list-cell-name required">单元</text>
				<view class="tui-right">
				   {{pageData.unitNum || '请选择单元'}}单元
				</view>
			</tui-list-cell>
			<tui-list-cell :arrow="true" class="tui-list">
				<text class="tui-list-cell-name required">楼层</text>
				<view class="tui-right">
				  <picker @change="bindPickerChange" :value="levelIndex" :range="layerCountllList" data-key="levelIndex">
				  	<view class="uni-input">{{layerCountllList[levelIndex] || pageData.layer || '请选楼层'}}</view>
				  </picker>
				</view>
			</tui-list-cell>
			<view class="sub-title">房间信息</view>
			<tui-list-cell>
				<view class="tui-line-cell">
					<view class="tui-list-cell-name required">
						房屋编号
					</view>
					<input placeholder-class="tui-phcolor" 
					:value="pageData.roomNum"
					class="tui-input" name="roomNum" placeholder="请输入房屋编号" maxlength="50"
					 type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="tui-line-cell">
					<view class="tui-list-cell-name required">
						房间数
					</view>
					<input placeholder-class="tui-phcolor" 
					:value="pageData.section"
					class="tui-input" name="section" placeholder="请输入房间数" maxlength="50"
					 type="text" />
				</view>
			</tui-list-cell>
			<view class="sub-title">户型信息</view>
			<tui-list-cell>
				<view class="tui-line-cell">
					<view class="tui-list-cell-name required">
						室
					</view>
				    <view class="tui-right">
						<picker @change="bindPickerChange" :value="roomIndex" range-key="value" :range="roomColumns" data-key="roomIndex">
							<view class="uni-input">{{(roomColumns[roomIndex] || {}).value || '请选择室'}}</view>
						</picker>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="tui-line-cell">
					<view class="tui-list-cell-name required">
						厅
					</view>
				    <view class="tui-right">
						<picker @change="bindPickerChange" :value="officeIndex" range-key="value" :range="officeColumns" data-key="officeIndex">
							<view class="uni-input">{{(officeColumns[officeIndex] || {}).value || '请选择厅'}}</view>
						</picker>
					</view>
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="tui-line-cell">
					<view class="tui-list-cell-name required">
						建筑面积
					</view>
					<input placeholder-class="tui-phcolor" 
					:value="pageData.builtUpArea"
					class="tui-input" name="builtUpArea" placeholder="请输入建筑面积" maxlength="50"
					 type="text" />
				</view>
			</tui-list-cell>
			<tui-list-cell>
				<view class="tui-line-cell">
					<view class="tui-list-cell-name required">
						房屋单价
					</view>
					<input placeholder-class="tui-phcolor" 
					:value="pageData.unitPrice"
					class="tui-input" name="unitPrice" placeholder="请输入房屋单价" maxlength="50"
					 type="text" />
				</view>
			</tui-list-cell>
			<view class="tui-btn-box">
				<tui-button class="tui-btn tui-danger tui-fillet" hover-class="tui-danger-hover" formType="submit">提 交</tui-button>
			</view>
		</form>
	</view>
</template>
<script>
	const form = require("@/components/utils/formValidation.js")
	import tuiListCell from "@/components/list-cell/list-cell"
	import tuiButton from "@/components/button/button"
	import utils from "@/utils/util.js"
	export default {
		components: {
			tuiListCell,
			tuiButton
		},
		
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				serverUrl:'',
				type: 1,
				startYear: 1980,
				endYear: 2030,
				cancelColor: "#888",
				color: "#5677fc",
				setDateTime: "",
				title: 'picker',
				context:'',
				arrayF:[{
						name:'恒大',
						val:1
					}, {
						name:'万科',
						val:2,
				}],
				layerCountllList:[],
				pageData:{},
				officeIndex:'',
				levelIndex: '',
				roomIndex:'',
				roomIdArr:[],
				imgList:[],
				userId:'',
				communityId:'',
				array: ['中国', '美国', '巴西', '日本'],
				columns: ['卧室报修', '管道报修', '客厅报修'],
				roomColumns:[
				{
				 key:'10',
				 index:0,
				 value:'一室'
				},
				{
				 key:'20',
				 index:1,
				 value:'两室'
				},
				{
				 key:'30',
				 index:2,
				 value:'三室'
				},
				{
				 key:'40',
				 index:3,
				 value:'四室'
				},
				{
				 key:'50',
				 index:4,
				 value:'五室'
				},
				],
				officeColumns:[
				{
				 key:'10',
				 index:0,
				 value:'一厅'
				},
				{
				 key:'20',
				 index:1,
				 value:'两厅'
				}	
				],
				index: 0,
				date: currentDate,
				time: '请选择上门时间'
			}
		},
		computed: {
				startDate() {
						return this.getDate('start');
				},
				endDate() {
						return this.getDate('end');
				},
				userInfo(){
					let us = {}
					try{
						us = uni.getStorageSync(this.java110Constant.mapping.USER_INFO);
						us = this.java110Util.des.desDecrypt(us)
						us = JSON.parse(us)
					}catch(e){
						//TODO handle the exception
					}
					return us
				}
		},
		onShow(){
			console.log(this.pageData)
		},
		onLoad(option){
			this.pageData = option || {
				apartment: "",
				builtUpArea: "",
				floorNum: "",
				layer: "",
				remark: "",
				roomId: "",
				roomNum: "",
				section: "",
				state: "",
				unitId: "",
				unitNum: "",
				unitPrice: ""
			};
			this.communityId = this.userInfo.communityId;
			if(!option.apartment){
				return
			}
			let roomIndex = option.apartment.substr(0,2);
			let officeIndex = option.apartment.substr(2,2);
			roomIndex = this.roomColumns.filter(item => item.value === roomIndex)[0].index;
			officeIndex = this.officeColumns.filter(item => item.value === officeIndex)[0].index;
			this.roomIndex = roomIndex;
			this.officeIndex = officeIndex;
			
		},
		mounted() {
			let that = this;
			
		},
		methods: {
			jump(key){
			    const urlConst = {
					floower:'/pages/life/commList/homeList',
					levelList:'/pages/life/commList/levelList',
					unitList:'/pages/life/commList/unitList'
				}	
				if(key === 'unitList' && !this.pageData.floorId){
					this.tui.toast('请先选择楼栋');
					return
				}
				uni.navigateTo({
					url:urlConst[key]+'?floorId=' + this.pageData.floorId
				})
			},
			result:async function(org){
				if(org.status === 1){
					let resList = [];
					let imgList = org.imgArr.forEach(async item => {
						this.java110Factory.base64.urlTobase64(item).then(res => {
							resList.push(res)
							this.imgList = [...resList]; 
						});
					});
					
				}
			},
			remove:function(index){
				this.imgList.splice(index, 1);
			},
			onNavigationBarButtonTap(data) {
				uni.navigateTo({
					url:'./infolist/infolist?' + utils.param(this.pageData) 
				})
			},
			show: function(type) {
				this.cancelColor = "#888";
				this.color = "#5677fc";
				this.setDateTime = "";
				this.startYear = 1980;
				this.endYear = 2030;
				this.$refs.dateTime.show()
			},
			change: function(e) {
				console.log(e)
				this.time = e.result
			},
			formSubmit: function(e) {
				//表单规则
				let rules = [{
					name: "roomNum",
					rule: ["required", "_isNum"], //可使用区间，此处主要测试功能
					msg: ["房屋编号", "房屋编号必须为数字"]
				},{
					name: "builtUpArea",
					rule: ["required", "isAmount"],
					msg: ["请输入建筑面积", "请输入正确的建筑面积"]
				},
				{
					name: "unitPrice",
					rule: ["required", "isAmount"],
					msg: ["请输入房屋单价", "请输入正确的房屋单价"]
				},
				{
					name: "section",
					rule: ["required", "isNum"],
					msg: ["请输入房间数", "请输入正确的房间数"]
				}
				];
				//进行表单检查
				let formData = e.detail.value;
				if(!this.pageData.floorNum){
					this.tui.toast('请选择楼栋')
					return
				}
				if(!this.pageData.unitNum){
					this.tui.toast('请选择单元')
					return
				}
				if(!this.pageData.layer && (this.levelIndex !== 0 && !this.levelIndex)){
					this.tui.toast('请选择楼层')
					return
				}
				if(!this.roomIndex){
					this.tui.toast('请选择室')
					return
				}
				if(!this.officeIndex){
					this.tui.toast('请选择厅')
					return
				}
				let checkRes = form.validation(formData, rules);
				if (!checkRes) {
					let obj = {
					  ...this.pageData,
					  communityId:this.communityId,
					  roomNum:formData.roomNum,
					  section:formData.section,
					  apartment:this.roomColumns[this.roomIndex].value + this.officeColumns[this.officeIndex].value,
					  builtUpArea:formData.builtUpArea,
					  state:!this.pageData.roomId?'2002':'',
					  layer:this.layerCountllList[this.levelIndex] || this.pageData.layer,
					  unitPrice:formData.unitPrice
					}
					uni.showLoading({
						mask: true,
						title: '请稍候...'
					})
					let url = this.java110Constant.url.updateRoom;
					if(!this.pageData.roomId){
						url = this.java110Constant.url.addRoom
					}
					this.java110Context.request({
					        url: url, //  http://hc.demo.winqi.cn:8012/appApi/ownerRepair.saveOwnerRepair 
					        header: this.java110Context.getHeaders(),
					        method: "POST",
					        data:{...obj}, //动态数据
					        success: function(res) {
							  uni.hideLoading();
					          if (res.statusCode == 200) {
					            uni.redirectTo({
					              url: '/pages/life/home/house',
					            });
					            return;
					          }
					          uni.showToast({
					            title: "服务器异常了",
					            icon: 'none',
					            duration: 2000
					          })
					        },
					        fail:function(e){
							  uni.hideLoading();
					          uni.showToast({
					            title: "服务器异常了",
					            icon: 'none',
					            duration: 2000
					          })
					        }
					      });

				} else {
					uni.showToast({
						title: checkRes,
						icon: "none"
					});
				}
			},
			
			bindPickerChange: function(e) {
				let { key } = e.target.dataset;
				this[key] = e.target.value
			},
			bindDateChange: function(e) {
					this.date = e.target.value
			},
			bindTimeChange: function(e) {
					this.time = e.target.value
			},
			getDate(type) {
					const date = new Date();
					let year = date.getFullYear();
					let month = date.getMonth() + 1;
					let day = date.getDate();

					if (type === 'start') {
							year = year - 60;
					} else if (type === 'end') {
							year = year + 2;
					}
					month = month > 9 ? month : '0' + month;;
					day = day > 9 ? day : '0' + day;
					return `${year}-${month}-${day}`;
			}
		}
	}
</script>

<style>
	.container {
		padding: 20rpx 0 50rpx 0;
	}

	.tui-line-cell {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.tui-title {
		line-height: 32rpx;
		flex-shrink: 0;
	}
	.tui-right {
		margin-left: auto;
		margin-right: 34upx;
		font-size: 26upx;
		line-height: 1;
		color: #999;
	}
	.tui-input {
		font-size: 32rpx;
		color: #333;
		flex: 1;
		text-align: right;
	}
	.picker-lable{
		padding-left: 20rpx;
	}
	.radio-group {
		margin-left: auto;
		transform: scale(0.8);
		transform-origin: 100% center;
		flex-shrink: 0;
	}

	.tui-radio {
		display: inline-block;
		padding-left: 28rpx;
		font-size: 36rpx;
		vertical-align: middle;
	}


	.tui-btn-box {
		padding: 40rpx 50rpx;
		box-sizing: border-box;
	}

	.btn-gray {
		margin-top: 30rpx;
	}

	.tui-tips {
		padding: 30rpx;
		color: #999;
		font-size: 24rpx;
	}
	.btn-primary{
		background: #e41f19;
	}
	uni-textarea{
		width: 700rpx;
	}
</style>
